<template>
    <div class="col-10 col-sm-8 col-lg-4" style="margin: 200px auto;">
        <form @submit.prevent="register">
            <img src="../../../assets/images/register.svg" alt="" style="margin-left: 35%; width: 120px;">
            <div class="input-group flex-nowrap input">
                <span class="input-group-text" >用户</span>
                <input type="text" v-model="username" class="form-control" placeholder="Username">
            </div>
            <div class="input-group flex-nowrap input">
                <span class="input-group-text" >密码</span>
                <input type="password" v-model="password" autocomplete="off" class="form-control" placeholder="Password">
            </div>
            <div class="input-group flex-nowrap input">
                <span class="input-group-text" >确认密码</span>
                <input type="confirmedPassword" v-model="confirmedPassword" autocomplete="off" class="form-control" placeholder="confirmedPassword">
            </div>
            <button type="submit" style="width: 45%;margin-top: 20px;margin-right: 10%;" class="btn btn-primary">注册</button>
            <button type="button" @click="toLogin" style="width: 45%;margin-top: 20px;" class="btn btn-info">登录</button>
        </form>
    </div>
</template>

<script>
    import {ref} from 'vue'
    import {useRouter} from 'vue-router'
    import $ from 'jquery'
    export default{
        name:'UserAccountRegister',
        components:{
        },
        setup() {
            let username = ref('');
            let password = ref('');
            let confirmedPassword = ref('');
            const router = useRouter();
            let toLogin = function(){
                router.push({name:'login'})
            }
            let register = function(){
                $.ajax({
                    url:"https://xwjsnakebot.com.cn/api/user/account/register/",
                    type:"post",
                    data:{
                        username:username.value,
                        password:password.value,
                        confirmedPassword:confirmedPassword.value
                    },
                    success(resp){
                        console.log(resp)
                        router.push({name:'login'})
                    },
                })
            }
            return {
                username,
                password,
                confirmedPassword,
                toLogin,
                register
            }
        },
    }
</script>

<style scoped>
.input{
    margin-top: 10px;
}
</style>